안녕하세요. 원스토어 iOS Platform팀 강석원입니다.
원스토어는 국내를 넘어 글로벌 서비스로 확장하면서 다양한 프로젝트를 효율적으로 관리하기 위해 디자인 시스템을 구축하고 있습니다. 이에 따라 저희 개발팀은 디자인 시스템을 보다 체계적으로 활용할 방법을 고민하게 되었고, 이를 개발 환경에 통합하여 업무 프로세스를 개선하고, 일관된 UI를 사용자에게 제공하기 위해 여러 단계를 적용하였습니다.
이번 포스팅에서는 그중 하나로, 디자인 시스템에 정의된 스타일 속성을 개발 환경에서 효과적으로 사용할 수 있도록 워크플로를 개선한 과정을 공유해보겠습니다.
문제
원스토어에는 스토어뿐만 아니라 결제, 개발자센터 등 매우 다양한 프로젝트가 있습니다. 여기에 Android, iOS, Web 같은 여러 플랫폼까지 고려하면 관리해야 할 대상은 더욱 많아지게 됩니다.
이러한 상황에서 디자이너가 기존에 정의된 스타일 속성을 변경하거나 새로운 스타일을 정의한다면, 어떤 일이 발생할까요?
이미 눈치 채신 분들도 있겠지만 이런 흐름에는 몇 가지 문제가 있습니다.
(1) 수정 그리고 다시 수정...
이러한 흐름이 단 한번에 끝난다면 더할 나위 없이 좋겠지만 대부분의 상황에서는 여러번 수정하고 확인하는 흐름이 반복됩니다. 가이드가 다시 변경되거나 또는 실수로 잘못 적용해 일관된 UI를 제공하지 못할 경우 개발자와 디자이너는 또 다시 이런 비효율적인 흐름을 반복해야합니다.
(2) 반복해서 남는 레거시
더 이상 사용되지 않는 스타일 속성을 소스코드에서 제대로 제거하지 않으면 이는 레거시로 남게됩니다. 이렇게 되면 불필요한 소스코드가 증가하고 커뮤니케이션할때도 혼란을 유발시킵니다.
이런 문제들이 반복되면 비효율적인 업무 흐름은 물론이고 디자인 일관성을 해칠 수도 있습니다.
해결 방법
그래서 저희는 디자인 시스템을 개발 환경과 통합하여 이러한 업무 프로세스를 개선하고자 했습니다.
개선한 프로세스는 다음과 같습니다.
원스토어 디자이너가 사용하는 디자인 도구인 피그마(Figma)는 디자인 속성을 재사용 가능한 값으로 저장할 수 있는 Variables 기능을 제공합니다. 이를 통해 디자이너들은 의미론적인 이름을 가진 Color, Typography, Spacing 등을 정의할 수 있습니다.
(1) Extract Figma Variables
피그마에서는 Variables를 추출할 수 있는 [Plugin API](링크 추가)를 제공합니다. 디자이너가 디자인 시스템의 스타일 속성을 Variables로 정의하면, 개발팀은 이를 추출하여 JSON 파일로 생성할 수 있는 피그마 플러그인을 만들어 프로세스의 첫 번째 단계를 해결할 수 있었습니다.
(2) Auto Generate Style Code
Android, iOS, Web은 사용하는 개발 언어가 각각 다르기 때문에 스타일을 정의하는 방식도 다릅니다. 앞 단계에서 추출한 Variables를 각 플랫폼의 요구사항에 맞게 자동으로 코드로 생성해야 했습니다. 이를 위해 저희는 Style Dictionary를 활용하여 추출한 데이터를 기반으로 각 플랫폼의 요구사항에 맞는 스타일 코드를 자동으로 생성할 수 있도록 했습니다.
결과
원스토어 개발팀은 앞서 소개한 두 단계를 구축하고, 이 과정에 CI/CD를 적용하여 디자인 시스템을 개발 환경에 통합함으로써 업무 프로세스를 개선했습니다.
이를 통해 불필요한 커뮤니케이션을 줄이고, 각자의 업무에 집중할 수 있어 효과적으로 프로세스를 개선할 수 있었습니다.
이번 포스팅을 시작으로, 원스토어에서 디자인 시스템을 개발 환경과 통합하기 위해 피그마 플러그인을 개발하고 Style Dictionary를 활용했던 경험들을 자세히 공유하고자 합니다.
원스토어는 디자인 시스템을 효과적으로 적용하여 더 나은 사용성을 제공하고, 더 많은 사용자들이 다양한 혜택을 받을 수 있도록 지속적으로 고민하고 있습니다.
앞으로 게시될 내용들에도 많은 관심과 기대 부탁드립니다.
감사합니다.